<template>
  <div class="getcompon-warpper">
    <div class="compon_one">
      <p>
        <img src="@/assets/imgs/compon_banner.png" />
      </p>
    </div>
    <div class="compon_two">
      <p class="hd_text">活动详情</p>
      <p class="hd_img">
        <img src="@/assets/imgs/compon_one.png" />
      </p>
      <div class="compon_two_text">
        <h6>领取优惠券</h6>
        <p>已注册【平安到家】的用户请输入手机号，立即领取5折市内出行优惠券，即可体验市内出行啦；</p>
        <p>
          <input type="tel" v-model="userPhone" placeholder="请输入手机号" maxlength="11" />
        </p>
        <h5 @click="getCouponBtn">
          <img src="@/assets/imgs/button@2x.png" />
        </h5>
      </div>
    </div>
    <div class="compon_three">
      <p class="hd_two_img">
        <img src="@/assets/imgs/compon_two.png" />
      </p>
      <div class="compon_three_text">
        <h6>免费乘车券</h6>
        <p>免费乘车券等你来领哦，微信搜索关注【平安到家客运服务号】，回复参与免费乘车城市名称，如回复：宜春，即可获得活动信息进行参与免费乘车</p>
      </div>
    </div>
  </div>
</template>
<script>
import { Tabs, Icon, Dialog, InputItem, Field, Toast } from 'mand-mobile';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Loading from '@/components/loading';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [Field.name]: Field,
    [InputItem.name]: InputItem,
  },
  data() {
    return {
      title: '优惠券',
      userPhone: '',
    };
  },
  mounted() {
    try {
      this.setHeader(this.title);
    } catch (e) {
      console.log(e);
    }
  },
  methods: {
    // 设置头部信息
    setHeader(text) {
      /* eslint-disable */
      var os = Utils.getOSName();
      if ((os == 'Linux' || os == 'Android') && handler) {
        //  handler.setTopText(JSON.stringify(text));
      } else if ((os == 'iOS' || os == 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.setTopText.postMessage(text);
      }
    },
    getCouponBtn() {
      if (!this.userPhone) {
        Toast({
          content: '请输入手机号码',
          duration: 3000,
          hasMask: true,
        });
        return false;
      }
      if (!/^1[3456789]\d{9}$/.test(this.userPhone)) {
        Toast({
          content: '手机号码格式错误',
          duration: 3000,
          hasMask: true,
        });
        return false;
      }
      let params = {
        user_phone: encryptByDESModeEBC(this.userPhone),
      };
      Loading.show();
      http.post('pakj/passenger/getCouponByPhone', params).then((res) => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.userPhone = '';
          Dialog.alert({
            title: '提示',
            content: '领取成功',
            confirmText: '确定',
          });
        } else {
          this.userPhone = '';
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定',
          });
        }
      });
    },
  },
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

.compon_one p img {
  width: 100%;
  height: 100%;
}

.compon_two {
  margin: 40px 30px;
  position: relative;
  height: 530px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 18px 30px 50px rgba(247, 166, 121, 0.25);
  border-radius: 20px;
  padding-bottom: 20px;
}

.hd_text {
  background: linear-gradient(-90deg, rgba(255, 220, 90, 1), rgba(255, 162, 38, 1));
  box-shadow: 0px 0px 18px 0px rgba(35, 24, 21, 0.14);
  border-radius: 32px;
  height: 63px;
  width: 207px;
  color: #FA521B;
  text-align: center;
  line-height: 63px;
  font-size: 28px;
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -104px;
}

.hd_img {
  position: absolute;
  top: 30px;
  right: 40px;
  z-index: 5;
}

.hd_img img {
  height: 179px;
}

.compon_two_text {
  position: relative;
  z-index: 10;
}

.compon_two_text h6 {
  padding: 40px 60px 0px 60px;
  font-size: 48px;
  color: #E56621;
  font-weight: 500;
}

.compon_two_text h5 {
  margin: 30px 40px 0px 40px;
}

.compon_two_text h5 img {
  width: 100%;
}

.compon_two_text p {
  padding: 20px 60px 0px 60px;
  font-size: 34px;
  color: #666666;
}

.compon_two_text p input {
  width: 98%;
  height: 66px;
  outline: none;
  border: solid 1px #ccc;
  padding-left: 2%;
  font-size: 32px;
  color: #333;
  border-radius: 7px;
  -webkit-appearance: none;
}

.compon_three {
  position: relative;
  margin: 30px 30px;
  height: 326px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 18px 30px 50px rgba(247, 166, 121, 0.25);
  border-radius: 20px;
  padding-bottom: 20px;
}

.compon_three h6 {
  padding: 40px 60px 0px 60px;
  font-size: 48px;
  color: #E56621;
  font-weight: 500;
}

.compon_three p {
  padding: 20px 60px 0px 60px;
}

.hd_two_img {
  position: absolute;
  top: 10px;
  right: 0px;
  z-index: 5;
}

.hd_two_img img {
  height: 179px;
}

.compon_three_text p {
  font-size: 34px;
  color: #666666;
}

.compon_three_text {
  position: relative;
  z-index: 10;
  padding-bottom: 20px;
}
</style>
